<template>
  <div class="rightDrawerCompFull orderManageSearchForm" ref="orderManageSearchForm">
    <a-form-model ref="formComp" :model="queryParams" layout="horizontal" class="AsteriskAfter newEditStyle editGroup">
      <!-- 订单编号 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('orderNum')">
            <a-input v-model="queryParams.orderNum" @keyup.enter="searchFun" :allow-clear="true" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 商品代码 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('goodsCode')">
            <a-input v-model="queryParams.goodsCode" @keyup.enter="searchFun" :allow-clear="true" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 操作流水 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('operationFlow')">
            <a-input v-model="queryParams.operateSn" @keyup.enter="searchFun" :allow-clear="true" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- VIN -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item label="VIN">
            <a-input v-model="queryParams.vin" @keyup.enter="searchFun" :allow-clear="true" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- VIN -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('userPhone')">
            <a-input v-model="queryParams.userPhone" :allow-clear="true" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 车型 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('vehicleModel')">
            <car-model-select
              :query="{ time: time }"
              :defaultValue="queryParams.modelId"
              @changeoption="queryParams.modelId = $event"
              :hasAll="false"
              :clear="true"
              mode="multiple"
            >
            </car-model-select> </a-form-model-item
          ></a-col>
      </a-row>
      <!-- 订单类型 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('orderForm')">
            <a-select
              mode="multiple"
              option-filter-prop="children"
              v-model="queryParams.orderType"
              :placeholder="$t('orderForm')"
              style="width: 100%"
              :allow-clear="true"
            >
              <a-select-option :value="item.value" v-for="item in orderType" :key="item.value">
                {{ $t(item.name) }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 订单状态 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('orderState')">
            <service-order-status-select
              mode="multiple"
              :clear="true"
              :default-value="queryParams.orderStatus"
              @changeoption="queryParams.orderStatus = $event"
            ></service-order-status-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="40">
        <!-- 支付状态 -->
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('payState')">
            <a-select
              v-model="queryParams.payStatus"
              :placeholder="$t('payState')"
              style="width: 100%"
              :allow-clear="true"
            >
              <a-select-option :value="item.value" v-for="item in payStatus" :key="item.value">
                {{ $t(item.name) }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 开票状态 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('invoicingState')">
            <a-select
              v-model="queryParams.billStatus"
              :placeholder="$t('invoicingState')"
              style="width: 100%"
              :allow-clear="true"
            >
              <a-select-option :value="item.value" v-for="item in billStatus" :key="item.value">
                {{ $t(item.name) }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 退款状态 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('refundState')">
            <a-select
              v-model="queryParams.refundStatus"
              :placeholder="$t('refundState')"
              style="width: 100%"
              :allow-clear="true"
            >
              <a-select-option :value="item.value" v-for="item in refundStatus" :key="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 创建时间 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('timeOfCreation')" class="with-picker-item">
            <a-range-picker
              :placeholder="[$t('startTime'), $t('endTime')]"
              show-time
              @change="onCreateTimeRangeChange"
              :value="defaultCreateTimeRange"
              :disabled-date="disabledDate"
              :allow-clear="true"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 支付时间 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('payTime')" class="with-picker-item">
            <a-range-picker
              :placeholder="[$t('startTime'), $t('endTime')]"
              show-time
              @change="onPayTimeRangeChange"
              :value="defaultPayTimeRange"
              :disabled-date="disabledDate"
              :allow-clear="true"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 开票时间 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('invoicingTime')" class="with-picker-item">
            <a-range-picker
              :placeholder="[$t('startTime'), $t('endTime')]"
              show-time
              @change="onBillTimeRangeChange"
              :value="defaultBillTimeRange"
              :disabled-date="disabledDate"
              :allow-clear="true"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 退订时间 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('refundTime')" class="with-picker-item">
            <a-range-picker
              :placeholder="[$t('startTime'), $t('endTime')]"
              show-time
              @change="onRefundTimeRangeChange"
              :value="defaultRefundTimeRange"
              :disabled-date="disabledDate"
              :allow-clear="true"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>
<script>
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
import CarModelSelect from '@/views/components/CarModelSelect'
import ServiceOrderStatusSelect from '@/views/components/ServiceOrderStatusSelect'
import moment from 'moment'
import { mapState } from 'vuex'
export default {
  components: { tableEllipsis, CommonSelect, CarModelSelect, ServiceOrderStatusSelect },
  props: {
    time: {
      type: Number,
      default: 123781
    },
    searchFun: {
      type: Function,
      default: () => {

      }
    }
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.orderManagement.queryParams,
      orderType: (state) => state.orderManagement.orderType,
      orderStatus: (state) => state.orderManagement.orderStatus,
      payStatus: (state) => state.orderManagement.payStatus,
      billStatus: (state) => state.orderManagement.billStatus,
      refundStatus: (state) => state.dict.orderRefundStatusDictCode
    }),
    // 创建时间选择的默认值
    defaultCreateTimeRange () {
      if (this.queryParams.startCreateTime && this.queryParams.endCreateTime) {
        return [moment(this.queryParams.startCreateTime), moment(this.queryParams.endCreateTime)]
      }
      return []
    },
    // 支付时间选择的默认值
    defaultPayTimeRange () {
      if (this.queryParams.startPayTime && this.queryParams.endPayTime) {
        return [moment(this.queryParams.startPayTime), moment(this.queryParams.endPayTime)]
      }
      return []
    },
    // 开票时间选择的默认值
    defaultBillTimeRange () {
      if (this.queryParams.startBillTime && this.queryParams.endBillTime) {
        return [moment(this.queryParams.startBillTime), moment(this.queryParams.endBillTime)]
      }
      return []
    },
    // 退款时间选择的默认值
    defaultRefundTimeRange () {
      if (this.queryParams.startRefundTime && this.queryParams.endRefundTime) {
        return [moment(this.queryParams.startRefundTime), moment(this.queryParams.endRefundTime)]
      }
      return []
    }
  },
  data () {
    return {}
  },
  methods: {
    changeOption (key, val) {
      this.queryParams[key] = val
    },
    onCreateTimeRangeChange (date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.startCreateTime = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.endCreateTime = dateString[1]
    },
    onPayTimeRangeChange (date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.startPayTime = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.endPayTime = dateString[1]
    },
    onBillTimeRangeChange (date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.startBillTime = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.endBillTime = dateString[1]
    },
    onRefundTimeRangeChange (date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.startRefundTime = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.endRefundTime = dateString[1]
    },
    // 时间限制范围 结束时间不能超过今天
    disabledDate (current) {
      return current > moment()
    }
  }
}
</script>
<style lang="less">
.orderManageSearchForm {
  .with-picker-item {
    .ant-form-item-control {
      .ant-calendar-picker {
        width: 100%;
      }
      .ant-calendar-range {
        width: 100%;
      }
    }
  }
}
</style>
